<template>
  <div class="container">
    <div class="list"
         v-for="(item,index) in shoplist"
         :key="index"
         @click="toshop(item)">
      <div class="box">
        <div class="left">
          <img :src="url+ item.shop_logo"
               alt
               class="headimg" />
        </div>
        <div class="right">
          <div class="title">
            <div class="text">{{item.shop_name}}</div>
            <div class="icon">
              <!-- <img :src="imgUrl+'star.png'" alt class="star" v-if="item.icon.star_sign"/>
              <img :src="imgUrl+'bao.png'" alt class="bao" v-if="item.icon.ensure"/>-->
            </div>
          </div>
          <div class="servicetype">
            {{item.category_name}} {{item.city_name}}/{{item.district_name}}
            <span class="km">
              <!-- <img :src="imgUrl+'location.png'" alt class="icon" /> -->
              {{item.distance}} km
            </span>
          </div>
          <div class="rate">
            <!-- <van-rate v-model="star" size=".6rem" color="#FF8269" void-color="#E2D6D4" readonly /> -->
            <img :src="imgUrl+'banstar.png'"
                 alt
                 v-if="0 <item.grade < 1"
                 class="icon" />
            <img :src="imgUrl+'rate.png'"
                 alt
                 v-if=" item.grade >= 1"
                 class="icon" />
            <img :src="imgUrl+'0star.png'"
                 alt
                 v-if=" 5- item.grade > 4"
                 class="icon" />
            <img :src="imgUrl+'banstar.png'"
                 alt
                 v-if="1 < item.grade && item.grade < 2"
                 class="icon" />
            <img :src="imgUrl+'rate.png'"
                 alt
                 v-if=" item.grade >= 2"
                 class="icon" />
            <img :src="imgUrl+'0star.png'"
                 alt
                 v-if=" 5- item.grade > 3"
                 class="icon" />
            <img :src="imgUrl+'banstar.png'"
                 alt
                 v-if=" 2 <item.grade  && item.grade < 3"
                 class="icon" />
            <img :src="imgUrl+'rate.png'"
                 alt
                 v-if="item.grade >= 3"
                 class="icon" />
            <img :src="imgUrl+'0star.png'"
                 alt
                 v-if=" 5- item.grade > 2"
                 class="icon" />
            <img :src="imgUrl+'banstar.png'"
                 alt
                 v-if="3 <item.grade && item.grade < 4"
                 class="icon" />
            <img :src="imgUrl+'rate.png'"
                 alt
                 v-if="item.grade >= 4"
                 class="icon" />
            <img :src="imgUrl+'0star.png'"
                 alt
                 v-if=" 5- item.grade > 1"
                 class="icon" />
            <img :src="imgUrl+'banstar.png'"
                 alt
                 v-if=" 4 <item.grade && item.grade < 5"
                 class="icon" />
            <img :src="imgUrl+'rate.png'"
                 alt
                 v-if="item.grade == 5"
                 class="icon" />
            <div class="text">
              {{item.grade}}分
            </div>

          </div>
          <div class="carddec"
               v-if="item.plus_info!==null">
            <img :src="imgUrl+'card.png'"
                 alt
                 class="icon" />
            <div class="text1">{{item.plus_info.plus_name}}</div>
            <div class="num">已售{{item.plus_info.plus_sale_num}}</div>
          </div>
          <!-- 服务 -->
          <div class="carddec card1"
               v-if="item.service_info!==null">
            <img :src="imgUrl+'fu.png'"
                 alt
                 class="icon" />
            <div class="text1">{{item.service_info.service_name}}</div>
            <div class="num">已售{{item.service_info.service_sale_num}}</div>
          </div>
        </div>
      </div>
      <div class="plus"
           v-if="item.plus_title">
        <img :src="imgUrl+'plus_tag.png'"
             alt=""
             class="tag">
        {{item.plus_title}}
      </div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      imgUrl: "https://img.ameimeika.com/h5_images/lifebeauty/",
      url: "https://img.ameimeika.com/",

    };
  },
  watch: {
    shoplist (newval, oldval) {
      this.shoplist = newval;
    }
  },
  props: {
    shoplist: []
  },
  methods: {
    toshop (e) {
      var link;
      let token = wx.getStorageSync("user_token")
        ? wx.getStorageSync("user_token")
        : "";

      if (common.is_online) {
        link = common.life_beauty +
          "shop?id=" +
          e.id +
          "&user_id=" +
          token;
        //  link = 'https://h5s.ameimeika.com/life_beauty/#/shop?id=42'
        console.log(e + "---生美店铺1");
      } else {
        link = common.life_beauty +
          "shop?id=" +
          e.id +
          "&user_id=" +
          token;
        console.log(e + "---生美店铺2");
      }
      wx.navigateTo({
        url: `/pages/package_main/advertisement/main?url=${encodeURIComponent(link)}`
      });
      console.log(link + "-----91");
    }
  }
};
</script>
<style scoped lang="less">
.container {
  box-sizing: border-box;
  padding: 0 10px;
  min-height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(243, 244, 246, 1) 8%
  );
  .list {
    background: #fff;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    // display: flex;
    font-size: 12px;
    color: #1d2023;
    box-shadow: 0px 2px 6px 0px rgba(240, 240, 240, 1);
    border-radius: 5px;
    margin-bottom: 10px;
    .box {
      display: flex;
      padding-bottom: 8px;
      padding: 12px 10px 0;
      .left {
        margin-right: 10px;
        .headimg {
          width: 114px;
          height: 114px;
          display: block;
          border-radius: 5px;
          // color: transparent
        }
      }
      .right {
        width: 77%;
        text-align: left;
        .title {
          height: 20px;
          font-size: 16px;
          display: flex;
          margin-bottom: 4px;
          line-height: 20px;
          font-weight: 500;
          color: #1d2023;
          font-family: PingFangSC-Medium, PingFang SC;
          .text {
            width: 88%;
            height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }
        .icon {
          .star,
          .bao {
            width: 13px;
            height: 13px;
            vertical-align: top;
            display: inline-block;
          }
        }
        .rate {
          color: #ff9800;
          font-size: 12px;
          margin-bottom: 15px;
          height: 18px;
          position: relative;
          .icon {
            width: 12px;
            height: 12px;
            display: inline-block;
            margin-right: 5px;
          }
          .text {
            display: inline-block;
            position: absolute;
            bottom: 10%;
          }
        }
        .servicetype {
          color: #999;
          font-size: 12px;
          // margin-top: 13px;
          margin-bottom: 7px;
          .km {
            float: right;
            position: relative;
            color: #999;
            .icon {
              width: 11px;
              height: 12px;
              display: inline-block;
              margin-right: 2px;
              vertical-align: baseline;
            }
          }
        }

        .carddec {
          height: 15px;
          font-size: 12px;
          color: #1d2023;
          display: flex;
          margin-top: 5px;
          line-height: 15px;
          position: relative;
          &.card1 {
            margin-top: 5px;
          }
          .icon {
            width: 13px;
            height: 13px;
            display: inline-block;
            margin-right: 5px;
            vertical-align: baseline;
          }
          .text1 {
            width: 72%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          .num {
            color: #78828c;
            position: absolute;
            right: 0;
          }
        }
      }
    }

    .plus {
      width: 355px;
      height: 32px;
      background: rgba(255, 241, 231, 0.45);
      line-height: 34px;
      color: #666;
      font-size: 12px;
      display: inline-block;
      position: relative;
      box-sizing: border-box;
      padding-left: 43px;
      margin-top: 8px;
      text-align: left;
      .tag{
        width:29px;
        height:16px;
        position: absolute;
        left: 10px;
        bottom: 8px;
      }
    }
  }
}
</style>
